<template>
  <div class="cash-out table-theme">
    <head-title title="合作--申请提现"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
        </div>
      </div>

      <p class="title">账户信息</p>
      <el-form
        :model="infoForm"
        :rules="infoFormRules"
        ref="infoForm"
        label-width="120px"
      >
        <el-form-item label="支付宝账号:" prop="">
          {{ info.alipay_sn }}
          <el-button
            style="margin-left: 50px"
            type="primary"
            @click="Dialog = true"
            >绑定支付宝</el-button
          >
        </el-form-item>
        <el-form-item label="电话:" prop="">{{ info.alipay_sn }}</el-form-item>
        <el-form-item label="联系人:" prop="">{{
          info.real_name
        }}</el-form-item>
        <el-form-item label="可提现金额:" prop="">{{
          info.money
        }}</el-form-item>
        <div class="cash-out-input-view">
          <el-form-item label="提现:" prop="money">
            <el-input
              type="number"
              onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
              v-model="infoForm.money"
              placeholder="请输入提现金额"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="支付密码:" prop="privat_key"
            ><el-input
              v-model="infoForm.privat_key"
              placeholder="请输入支付密码"
              show-password
            ></el-input
          ></el-form-item>
        </div>
        <el-button
          type="primary"
          style="margin-left: 30px"
          @click="submitForm(0, 'infoForm')"
          >保存</el-button
        >
        <span
          style="margin-left: 20px; cursor: pointer"
          @click="fPDialog = true"
          >忘记密码</span
        >
      </el-form>
    </el-card>

    <!-- 绑定支付宝弹框 -->
    <el-dialog
      title="绑定账户信息"
      :visible.sync="Dialog"
      center
      :modal-append-to-body="false"
      width="400px"
    >
      <el-form
        :model="bindingForm"
        :rules="bindingFormRules"
        ref="bindingForm"
        label-width="120px"
      >
        <el-form-item label="支付宝账户:" prop="alipay_sn">
          <el-input
            v-model="bindingForm.alipay_sn"
            placeholder="请输入手机号码"
            clearable
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名:" prop="real_name"
          ><el-input
            v-model="bindingForm.real_name"
            placeholder="请输入姓名"
            clearable
          ></el-input
        ></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Dialog = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(1, 'bindingForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 忘记密码弹框 -->
    <el-dialog
      title="设置支付密码"
      :visible.sync="fPDialog"
      center
      :modal-append-to-body="false"
      width="450px"
    >
      <el-form
        :model="FPasswordForm"
        :rules="bindingFormRules"
        ref="FPasswordForm"
        label-width="120px"
      >
        <el-form-item label="支付宝账户:" prop="phone">
          <el-input
            v-model="FPasswordForm.phone"
            placeholder="请输入支付宝绑定的手机号码"
            clearable
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone"
          ><el-input
            v-model="FPasswordForm.phone"
            placeholder="请输入手机号码"
            clearable
            maxlength="11"
          ></el-input
        ></el-form-item>
        <el-form-item label="验证码:" prop="code">
          <el-input
            v-model="FPasswordForm.code"
            placeholder="请输入验证码"
            clearable
            maxlength="11"
          >
            <el-button slot="append" @click="getCode">
              <span v-if="!isSend">获取验证码</span>
              <span v-else>{{ count }} S</span>
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="支付密码:" prop="privat_key">
          <el-input
            v-model="FPasswordForm.privat_key"
            placeholder="请输入支付密码"
            clearable
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认支付密码:" prop="confirm_privat_key">
          <el-input
            v-model="FPasswordForm.confirm_privat_key"
            placeholder="请确认支付密码"
            clearable
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="fPDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitForm(2, 'FPasswordForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      down: null,
      isSend: false,
      count: 60,
      Dialog: false,
      fPDialog: false,
      info: "",
      infoForm: {
        money: "",
        privat_key: "",
        pay_client: 4,
      },
      infoFormRules: {
        money: [{ required: true, message: "请输入提现金额" }],
        privat_key: [{ required: true, message: "请输入支付密码" }],
      },
      bindingForm: {
        alipay_sn: "",
        real_name: "",
      },
      bindingFormRules: {
        alipay_sn: [{ required: true, message: "请输入手机号码" }],
        real_name: [{ required: true, message: "请输入姓名" }],
      },
      FPasswordForm: {
        phone: "",
        code: "",
        privat_key: "",
        confirm_privat_key: "",
      },
      FPasswordFormRules: {
        phone: [{ required: true, message: "请输入手机号码" }],
        code: [{ required: true, message: "请输入手机号码" }],
        privat_key: [{ required: true, message: "请输入支付密码" }],
        confirm_privat_key: [{ required: true, message: "请确认支付密码" }],
      },
    };
  },
  watch: {
    "infoForm.money": function (val) {
      if (val > this.info.money || val < 0) {
        this.infoForm.money = 0;
        this.$message.error("请输入正确的金额");
      }
    },
  },
  methods: {
    // 初始化列表
    init() {
      this.$http(this.$ApiList.StoreWallet).then((res) => {
        this.info = res.datas;
      });
    },
    //提交
    submitForm(type, formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // type 0 提现 1绑定支付宝 2修改支付密码
          if (type == 0) {
            this.$http(this.$ApiList.WalletWithdrawal, this.infoForm).then(
              (res) => {
                if (res.code == 200) {
                  this.$layer.msg("提交成功");
                  this.$router.push({ path: "/cash_out_details" });
                }
              }
            );
            this.init();
          } else if (type == 1) {
            let phoneRexp =
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[8-9])\d{8}$/;
            if (!phoneRexp.test(this.bindingForm.alipay_sn)) {
              this.$layer.msg("请输入正确的手机号码");
              return false;
            }
            this.$http(this.$ApiList.BindingWallet, this.bindingForm).then(
              (res) => {
                if (res.code == 200) {
                  this.$layer.msg("绑定成功");
                  this.Dialog = false;
                  this.init();
                }
              }
            );
            this.init();
          } else if (type == 2) {
            let phoneRexp =
              /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[8-9])\d{8}$/;
            if (!phoneRexp.test(this.FPasswordForm.phone)) {
              this.$layer.msg("请输入正确的手机号码");
              return false;
            }
            this.$http(this.$ApiList.UpWalletPsd, this.FPasswordForm).then(
              (res) => {
                if (res.code == 200) {
                  this.$layer.msg("绑定成功");
                  this.fPDialog = false;
                }
              }
            );
            this.init();
          }
        } else {
          this.$layer.msg("请填写完整信息后提交");
        }
      });
    },
    getCode() {
      if (this.isSend) {
        return false;
      }
      let timestamp = parseInt((Math.random() + 1) * Math.pow(10, 13 - 1));
      let phoneRexp =
        /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[8-9])\d{8}$/;
      if (!phoneRexp.test(this.FPasswordForm.phone)) {
        this.$layer.msg("请输入正确的手机号码");
        return false;
      }
      this.isSend = true;
      let data = {
        phone: this.FPasswordForm.phone,
        login_code: "login",
      };
      this.$http(this.$ApiList.PhoneGetCode, data).then((res) => {
        if (res.code == 200) {
          this.coutDown();
        }
      });
    },
    coutDown() {
      this.down = setInterval(() => {
        this.count--;
        if (this.count < 1) {
          clearInterval(this.down);
          this.count = 60;
          this.isSend = false;
        }
      }, 1000);
    },
    forgetPassword() {},
    refreshPage() {
      this.init();
    },
  },
  created() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.menu-right {
  flex: 1;
}

.cash-out-input-view {
  width: 400px;
}
</style>
